<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AI</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="styles.css">
    <style>
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: background-color 0.3s;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        .tablinks {
            height: 100%;
        }
    </style>
</head>

<body style="display: flex; flex-direction: column; height: 100vh; overflow: hidden;">
    <div class="tab">
        <button class="tablinks active" onclick="openTab(event, 'https://kimi.moonshot.cn/')">Kimi</button>
        <button class="tablinks" onclick="openTab(event, 'https://app.nextchat.dev/')">Chat-gpt(nextchat key)</button>
        <button class="tablinks"
            onclick="openTab(event, 'http://openai.c1bd856bee89b4b6aa3747c9bff6ab108.ap-southeast-1.alicontainer.com')">Chat-gpt(openAi
            key)</button>
        <button class="tablinks" onclick="openTab(event, 'https://chatgpt.com/')">Chat-gpt-OpenAi(需翻墙)</button>
        <button class="tablinks" onclick="openWindow(event, 'https://yiyan.baidu.com/')">文心一眼</button>
    </div>
    <div style="flex: auto;" id="Tab">
        <iframe src="https://kimi.moonshot.cn/" style="width: 100%; height: 100%;"></iframe>
    </div>


    <script src="app.js"></script>
    <script>
        function openWindow(evt, target) {
            // 阻止默认链接行为
            evt.preventDefault();
            window.open(target, '_blank');
        }
        function openTab(evt, target) {
            // 阻止默认链接行为
            evt.preventDefault();

            // 检查是否存在目标src的iframe
            let targetIframe = document.querySelector(`iframe[src="${target}"]`);
            const iframeList = document.querySelectorAll("iframe");
            if (targetIframe?.style.display === 'block') return
            // 隐藏所有现存的iframe
            for (let i = 0; i < iframeList.length; i++) {
                iframeList[i].style.display = "none";
            }
            // 如果目标iframe不存在，则创建一个新的
            if (!targetIframe) {
                targetIframe = document.createElement("iframe");
                targetIframe.src = target;
                targetIframe.style.width = "100%";
                targetIframe.style.height = "100%";
                document.getElementById("Tab").appendChild(targetIframe);
            }

            // 显示目标iframe
            targetIframe.style.display = "block";

            // 更新活动按钮样式
            const buttons = document.getElementsByClassName("tablinks");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].classList.remove("active");
            }
            evt.currentTarget.classList.add("active");
        }
    </script>
</body>

</html>